<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="${(coursePreviewInfo.courseBase.name)!''} - 学成在线课程详情">
    <meta name="author" content="学成在线">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/static/img/asset-favicon.ico">
    <title>学成在线 - ${(coursePreviewInfo.courseBase.name)!''}</title>

    <!-- CSS引入 -->
    <link rel="stylesheet" href="/static/plugins/normalize-css/normalize.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/page-learing-article.css">
    <style>
        /* 添加三级目录样式 */
        .list-box {
            list-style: none;
            padding-left: 0;
        }

        .section-header {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .subsection-list {
            list-style: none;
            padding-left: 30px;
            margin-top: 5px;
        }

        .subsection-item {
            padding: 5px 0;
            display: flex;
            align-items: center;
        }

        .subsection-item a {
            display: flex;
            align-items: center;
        }

        .i-play-small,
        .i-video-small,
        .i-doc-small,
        .i-exam-small {
            font-size: 14px;
            margin-right: 5px;
        }

        .preview-tag-small {
            background-color: #ffeb3b;
            color: #333;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 10px;
        }

        .media-type-small,
        .duration-small {
            font-size: 12px;
            color: #666;
            margin-left: 10px;
        }
    </style>
</head>

<body>
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->

<#if coursePreviewInfo?? && coursePreviewInfo.courseBase??>
    <div id="learningArea">
        <!-- 课程横幅 -->
        <div class="article-banner">
            <div class="banner-bg"></div>
            <div class="banner-info">
                <div class="banner-left">
                    <!-- 修复分类显示 -->
                    <p>
                        <#-- 显示大分类 -->
                        <#if coursePreviewInfo.courseBase.mt?has_content>
                            ${coursePreviewInfo.courseBase.mt}
                        <#else>
                            未分类
                        </#if>
                        <span>\
                        <#-- 显示小分类 -->
                            <#if coursePreviewInfo.courseBase.st?has_content>
                                ${coursePreviewInfo.courseBase.st}
                            <#else>
                                未分类
                            </#if>
                        </span>
                    </p>

                    <h1 class="tit">${(coursePreviewInfo.courseBase.name)!''}</h1>

                    <div class="pic">
                        <#assign charge = (coursePreviewInfo.courseMarket.charge)!''>
                        <#assign price = (coursePreviewInfo.courseMarket.price)!0>
                        <#assign originalPrice = (coursePreviewInfo.courseMarket.originalPrice)!0>

                        <#if charge == '201000'>
                            <span class="new-pic">免费</span>
                        <#else>
                            <span class="new-pic">特惠价格￥${price?string("0.##")}</span>
                            <#if originalPrice gt price>
                                <span class="old-pic">原价￥${originalPrice?string("0.##")}</span>
                            </#if>
                        </#if>
                    </div>

                    <div class="info">
                        <a href="#" class="btn-learn" @click.prevent="startLearning()">马上学习</a>
                        <span><em>难度等级</em>
                            <#assign grade = (coursePreviewInfo.courseBase.grade)!''>
                            <#if grade == '204001'>
                                初级
                            <#elseif grade == '204002'>
                                中级
                            <#elseif grade == '204003'>
                                高级
                            <#else>
                                未设置
                            </#if>
                        </span>
                        <span><em>授课模式</em>
                            <#assign teachmode = (coursePreviewInfo.courseBase.teachmode)!''>
                            <#if teachmode == '200002'>
                                录播
                            <#elseif teachmode == '200003'>
                                直播
                            <#else>
                                未设置
                            </#if>
                        </span>
                    </div>
                </div>

                <div class="banner-rit">
                    <#assign coverUrl = (coursePreviewInfo.courseBase.pic)?has_content?then("http://file.51xuecheng.cn${coursePreviewInfo.courseBase.pic}", "/static/img/widget-video.png")>
                    <a href="#" target="_blank">
                        <img src="${coverUrl}"
                             alt="${(coursePreviewInfo.courseBase.name)!''}封面图"
                             width="270" height="156"
                             loading="lazy" onerror="this.src='/static/img/widget-video.png'">
                    </a>
                    <p class="vid-act">
                        <span><i class="i-heart"></i>收藏 ${(coursePreviewInfo.courseBase.favorites)!0}</span>
                        <span>分享 <i class="i-weixin"></i><i class="i-qq"></i></span>
                    </p>
                </div>
            </div>
        </div>

        <!-- 课程内容区域 -->
        <div class="article-cont">
            <!-- 导航标签 -->
            <div class="tit-list">
                <a href="javascript:;" data-tab="articleClass" class="active">课程介绍</a>
                <a href="javascript:;" data-tab="articleItem">目录</a>
                <a href="javascript:;" data-tab="artcleAsk">问答</a>
                <a href="javascript:;" data-tab="artcleNot">笔记</a>
                <a href="javascript:;" data-tab="artcleCod">评价</a>
            </div>

            <!-- 标签内容区域 -->
            <div class="article-box">
                <!-- 课程介绍 -->
                <div class="articleClass tab-content active">
                    <div class="article-cont">
                        <div class="article-left-box">
                            <div class="content">
                                <!-- 适用人群 -->
                                <div class="content-com suit">
                                    <div class="title"><span>适用人群</span></div>
                                    <div class="cont cktop">
                                        <p>${(coursePreviewInfo.courseBase.users)!'本课程适合所有对该领域感兴趣的学员'}</p>
                                    </div>
                                </div>

                                <!-- 课程制作 -->
                                <div class="content-com course">
                                    <div class="title"><span>课程制作</span></div>
                                    <div class="cont">
                                        <#if coursePreviewInfo.courseTeacher??>
                                            <div class="img-box">
                                                <#assign teacherImg = (coursePreviewInfo.courseTeacher.photograph)?has_content?then("http://file.51xuecheng.cn${coursePreviewInfo.courseTeacher.photograph}", "/static/img/widget-myImg.jpg")>
                                                <img src="${teacherImg}"
                                                     alt="${(coursePreviewInfo.courseTeacher.teacherName)!''}老师"
                                                     loading="lazy"
                                                     onerror="this.src='/static/img/widget-myImg.jpg'">
                                            </div>
                                            <div class="info-box">
                                                <p class="name">教学方：<em>${(coursePreviewInfo.courseTeacher.teacherName)!'XX老师'}</em></p>
                                                <p class="position">${(coursePreviewInfo.courseTeacher.position)!''}</p>
                                                <p class="info">${(coursePreviewInfo.courseTeacher.introduction)!'资深讲师，拥有多年教学经验'}</p>
                                            </div>
                                        <#else>
                                            <div class="alert alert-info">
                                                暂无教师信息
                                            </div>
                                        </#if>
                                    </div>
                                </div>

                                <!-- 课程介绍 -->
                                <div class="content-com about">
                                    <div class="title"><span>课程介绍</span></div>
                                    <div class="cont cktop">
                                        <p>${(coursePreviewInfo.courseBase.description)?replace('\n', '<br>', 'r')}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 侧边栏 -->
                        <!--#include virtual="/include/course_detail_side.html"-->
                    </div>
                </div>

                <!-- 课程目录 - 根据新数据结构重新实现 -->
                <div class="articleItem tab-content">
                    <div class="article-cont-catalog">
                        <div class="article-left-box">
                            <div class="content">
                                <#if coursePreviewInfo.teachPlanTreeNodes?? && coursePreviewInfo.teachPlanTreeNodes?size gt 0>
                                    <#list coursePreviewInfo.teachPlanTreeNodes as chapter>
                                        <#if chapter.grade == 1>
                                            <!-- 章节点 -->
                                            <div class="item">
                                                <div class="title act">
                                                    <i class="i-chevron-top"></i>
                                                    ${chapter.pname!''}
                                                    <#if chapter.timelength??>
                                                        <span class="time">${chapter.timelength}</span>
                                                    </#if>
                                                </div>
                                                <div class="drop-down">
                                                    <ul class="list-box">
                                                        <!-- 节节点 -->
                                                        <#if chapter.teachPlanTreeNodes?? && chapter.teachPlanTreeNodes?size gt 0>
                                                            <#list chapter.teachPlanTreeNodes as section>
                                                                <#if section.grade == 2>
                                                                    <li>
                                                                        <div class="section-header">
                                                                            <a href="http://www.51xuecheng.cn/course/preview/learning.html?id=${coursePreviewInfo.courseBase.id!''}&chapter=${section.id!''}"
                                                                               target="_blank">
                                                                                <i class="i-play"></i> ${section.pname!''}
                                                                            </a>

                                                                            <#if section.isPreview?? && section.isPreview == '1'>
                                                                                <span class="preview-tag">试学</span>
                                                                            </#if>

                                                                            <#if section.mediaType??>
                                                                                <span class="media-type">
                                                                    <#if section.mediaType == '001001'>
                                                                        <i class="i-video"></i> 视频
                                                                    <#elseif section.mediaType == '001002'>
                                                                        <i class="i-doc"></i> 文档
                                                                    <#elseif section.mediaType == '001003'>
                                                                        <i class="i-exam"></i> 测验
                                                                    <#else>
                                                                        ${section.mediaType!''}
                                                                    </#if>
                                                                </span>
                                                                            </#if>

                                                                            <#if section.timelength??>
                                                                                <span class="duration">${section.timelength}</span>
                                                                            </#if>
                                                                        </div>

                                                                        <!-- 小节节点 -->
                                                                        <#if section.teachPlanTreeNodes?? && section.teachPlanTreeNodes?size gt 0>
                                                                            <ul class="subsection-list">
                                                                                <#list section.teachPlanTreeNodes as subsection>
                                                                                    <#if subsection.grade == 3>
                                                                                        <li class="subsection-item">
                                                                                            <a href="http://www.51xuecheng.cn/course/preview/learning.html?id=${coursePreviewInfo.courseBase.id!''}&chapter=${subsection.id!''}"
                                                                                               target="_blank">
                                                                                                <i class="i-play-small"></i> ${subsection.pname!''}
                                                                                            </a>

                                                                                            <#if subsection.isPreview?? && subsection.isPreview == '1'>
                                                                                                <span class="preview-tag-small">试学</span>
                                                                                            </#if>

                                                                                            <#if subsection.mediaType??>
                                                                                                <span class="media-type-small">
                                                                                    <#if subsection.mediaType == '001001'>
                                                                                        <i class="i-video-small"></i>
                                                                                    <#elseif subsection.mediaType == '001002'>
                                                                                        <i class="i-doc-small"></i>
                                                                                    <#elseif subsection.mediaType == '001003'>
                                                                                        <i class="i-exam-small"></i>
                                                                                    <#else>
                                                                                        ${subsection.mediaType!''}
                                                                                    </#if>
                                                                                </span>
                                                                                            </#if>

                                                                                            <#if subsection.timelength??>
                                                                                                <span class="duration-small">${subsection.timelength}</span>
                                                                                            </#if>
                                                                                        </li>
                                                                                    </#if>
                                                                                </#list>
                                                                            </ul>
                                                                        </#if>
                                                                    </li>
                                                                </#if>
                                                            </#list>
                                                        </#if>
                                                    </ul>
                                                </div>
                                            </div>
                                        </#if>
                                    </#list>
                                <#else>
                                    <div class="no-content">
                                        <i class="i-book"></i>
                                        <p>暂无课程目录信息</p>
                                    </div>
                                </#if>
                            </div>
                        </div>

                        <!-- 侧边栏 -->
                        <!--#include virtual="/include/course_detail_side.html"-->
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面底部 -->
        <!--#include virtual="/include/footer.html"-->
    </div>
<#else>
    <div class="alert alert-danger text-center" style="margin: 100px auto; max-width: 600px;">
        <h3>课程信息加载失败</h3>
        <p>无法获取课程详情信息，请稍后再试。</p>
        <a href="/" class="btn btn-primary">返回首页</a>
    </div>
</#if>

<script>
    // 全局课程信息
    <#if coursePreviewInfo?? && coursePreviewInfo.courseBase??>
    window.courseData = {
        id: "${coursePreviewInfo.courseBase.id!''}",
        name: "${coursePreviewInfo.courseBase.name!''}",
        charge: "${(coursePreviewInfo.courseMarket.charge)!'201000'}",
        price: ${(coursePreviewInfo.courseMarket.price)!0},
        originalPrice: ${(coursePreviewInfo.courseMarket.originalPrice)!0},
        validDays: ${(coursePreviewInfo.courseMarket.validDays)!30}
    };
    <#else>
    window.courseData = {};
    </#if>
</script>

<!-- 引入修复后的JS -->
<script defer src="/static/js/course-detail-fixed.js"></script>
</body>
</html>